<!--
 * @Author: your name
 * @Date: 2020-09-09 17:19:33
 * @LastEditTime: 2021-10-25 17:02:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/Gatt/components/GattDate/components/GattMain.vue
-->
<template>
  <!-- 甘特主题内容 -->
  <div class="gatt-main">
    <!-- 头部第一行，时间范围内所有年份一行排列 -->
      <first-row
        :allDays="allDays"
        :currentDaySize="currentDaySize">
      </first-row>
    <!-- 顶部固定显示的提示年月 -->
    <div class="topMonth" v-if="showFixdTopMonth">{{ fixdTopMonth }}</div>
    <!-- 除第一行以外的容器 -->
    <div class="gatt-main-wrap">
      <!-- 头部第二行 -->
      <second-row
        :days="days"
        :allDays="allDays"
        :lineBgHeight="lineBgHeight"
        :currentDaySize="currentDaySize">
      </second-row>
      <!-- 内容区域容器 -->
      <div ref="gattMainWrapCont"
        @scroll="handlerBGScroll"
        class="gatt-main-wrap-cont">
        <line-all
          :list="computedList"
          :fieldsAttr="fieldsAttr"
          @leftCurDragMounsedown="leftCurDragMounsedown"
          @rightCurDragMounsedown="rightCurDragMounsedown"
          @lineMousedown="lineMousedown"
          @thunkMouseup="thunkMouseup"
          @lineMouseleave="lineMouseleave"
          @lineMouseenter="lineMouseenter">
        </line-all>
      </div>
    </div>
  </div>
</template>

<script>
import FirstRow from './FirstRow.vue'
import SecondRow from './SecondRow.vue'
import LineAll from './LineAll'
export default {
  name: 'GattMain',
  components: {
    FirstRow,
    SecondRow,
    LineAll
  },
  props: {
    computedList: {
      type: Array,
      default: () => []
    },
    fieldsAttr: {
      type: Object,
      default: () => {}
    },
    days: {
      type: Array,
      default: () => []
    },
    allDays: {
      type: Array,
      default: () => []
    },
    currentDaySize: {
      type: Object,
      default: () => {
        return { label: '按天', value: 40, mode: 'day' }
      }
    },
    tableScrollTop: {
      type: Number,
      default: () => 0
    },
    showFixdTopMonth: {
      type: Boolean,
      default: () => false
    },
    fixdTopMonth: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      // 内容容器背景高度
      lineBgHeight: 0,
      d: []
    }
  },
  watch: {
    tableScrollTop: {
      handler: function (newValue) {
        const gatt = this.$refs.gattMainWrapCont
        gatt.scrollTo(0, newValue)
      }
    }
  },
  mounted () {
    this.setLineHeight()
  },
  methods: {
    // 每一行拖拽
    /**
     * @param  {String} dom ref
     * @param  {Object} events $event
     * @param  {Number} id id
     * @param  {Number} parentId parentId
     * @param  {Number} index index
     */
    lineMousedown (dom, e, id, parentId, index, item) {
      this.$emit('lineMousedown', dom, e, id, parentId, index, item)
    },
    // 左侧拖拽增加
    /**
     * @param  {String} dom ref
     * @param  {Object} e $event
     * @param  {Number} id id
     * @param  {Number} parentId parentId
     * @param  {Number} index index
     */
    leftCurDragMounsedown (domId, e, id, parentId, index, item) {
      this.$emit('leftCurDragMounsedown', domId, e, id, parentId, index, item)
    },
    rightCurDragMounsedown (domId, e, id, parentId, index, item) {
      this.$emit('rightCurDragMounsedown', domId, e, id, parentId, index, item)
    },
    thunkMouseup (per, e, id, parentId) {
      this.$emit('thunkMouseup', per, e, id, parentId)
    },
    lineMouseenter (dom, e, id, parentId, index) {
      this.$emit('lineMouseenter', dom, e, id, parentId, index)
    },
    lineMouseleave (e) {
      this.$emit('lineMouseleave', e)
    },
    handlerBGScroll (e) {
      this.$emit('handlerBGScroll', e)
    },
    // 设置进度容器高度
    setLineHeight () {
      this.$nextTick(() => {
        const height = window.getComputedStyle(
          document.getElementsByClassName('gatt-main-wrap-cont')[0]
        ).height
        this.lineBgHeight = height || 30
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.gatt-main{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  .topMonth{
    background-color: #fff;
    position: fixed;
    top: 41px;
    height: 19px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #909090;
  }
  &-wrap{
    height: calc(100% - 21px);
    position: absolute;
    left: 0;
    top: 21px;
    overflow: hidden;
    &-cont{
      width: 100%;
      height: calc(100% - 21px);
      overflow: scroll;
    }
  }
}
</style>
